<template>
  <el-dialog
    v-model="show"
    :title="title"
    width="40vw"
    destroy-on-close
    center
    custom-class="add-check"
    @close="handleCancel"
  >
    <div class="check-table">
      <div class="card-header">验收项</div>
      <el-table
        :data="checkTable"
        stripe
        v-loading="loading"
        :header-cell-style="{
          background: '#F7F9FD',
          color: '#000',
          height: '48px',
          borderTop: '1px soild #E4E8F2'
        }"
        max-height="250"
      >
        <el-table-column type="index" label="序号" width="80">
          <template v-slot="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="witnessName" label="验收记录"></el-table-column>
      </el-table>
    </div>

    <el-form
      :model="formData"
      label-width="110px"
      ref="formDataRef"
      :rules="formRules"
    >
      <el-form-item label="审批类型" prop="approvalTypeSup">
        <el-radio-group v-model="formData.approvalTypeSup">
          <el-radio label="1">有监理</el-radio>
          <el-radio label="0">无监理</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="施工单位人员" prop="partybHandlerInfo">
        <el-select
          v-model="formData.partybHandlerInfo"
          filterable
          clearable
          remote
          placeholder="请输入姓名搜索"
          :remote-method="getUserData"
          value-key="value"
          style="width: 100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          placeholder="请输入"
          type="textarea"
          v-model="formData.remark"
          :rows="3"
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSure">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { storageLocal } from "/@/utils/storage";
import { getUserList } from "/@/api/user";
export default defineComponent({
  name: "approveDialog",
  props: {
    checkTable: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: "启动"
    }
  },
  emits: ["handleCancel", "handleSure"],
  setup(props, { emit }) {
    const show = ref(true);
    const formDataRef = ref<HTMLFormElement | null>(null) as any;
    const state = reactive({
      formData: {
        checkItemIds: [],
        approvalTypeSup: "",
        remark: "",
        partybHandlerId: "",
        partybHandlerName: "",
        partybHandlerInfo: "" as any,
        projectName: storageLocal.getItem("projectInfo").name,
        projectManageId: storageLocal.getItem("projectInfo").id
      }
    });
    const userList = ref([]); // 人员列表数据
    const formRules = ref({
      approvalTypeSup: [
        { required: true, message: "请选择审批类型", trigger: "change" }
      ],
      partybHandlerInfo: [
        { required: true, message: "请选择施工单位", trigger: "change" }
      ]
    });
    //获取项目组成员
    const getUserData = async (query = "") => {
      if (!query) {
        userList.value = [];
        return;
      }
      try {
        const params = {
          pageNum: 1,
          pageSize: 100,
          nameLike: query
        };
        const { code, data } = await getUserList(params);
        if (code === 200) {
          userList.value = data.list.map(item => {
            return { value: item.id, label: `${item.name}(${item.userName})` };
          });
        }
      } catch (err) {
        console.log(err);
      }
    };

    const validate = async () => {
      const isValid = await new Promise(resolve =>
        formDataRef.value.validate(resolve)
      );
      return isValid;
    };

    const handleCancel = async () => {
      emit("handleCancel");
    };

    const handleSure = async () => {
      const isValid = await formDataRef.value.validate();
      if (!isValid) return;
      if (props.checkTable.length) {
        state.formData.checkItemIds = props.checkTable.map(item => item.id);
      }
      emit("handleSure", state.formData);
    };

    return {
      formDataRef,
      formRules,
      show,
      userList,
      ...toRefs(state),
      validate,
      handleCancel,
      handleSure,
      getUserData
    };
  }
});
</script>
<style lang="scss" scoped>
:deep .back-picture {
  .el-upload-list__item {
    width: 56px;
    height: 56px;
    .el-upload-list__item-actions {
      font-size: 18px;
    }
  }
  .el-upload--picture-card {
    width: 56px;
    height: 56px;
    background: #fdfdff;
    border-radius: 4px;
    border: 1px solid #e4e8f2;
    i {
      height: 100%;
      width: 100%;
      line-height: 100%;
      font-size: 18px;
      color: #8c939d;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8895b7;
      }
    }
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
:deep .add-check {
  .el-dialog__body {
    padding: 20px 40px 8px 10px;
  }
}
.check-table {
  padding-left: 20px;
  .card-header {
    font-weight: bold;
    color: #494c53;
  }
  .el-table {
    width: 100%;
    margin: 20px 0;
  }
}
</style>
